<template>
  <div>
    <el-card shadow="never" class="card">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1" />
        <el-step title="步骤 2" />
        <el-step title="步骤 3" />
      </el-steps>

    </el-card>

    <el-card shadow="never" class="card2">
      <div v-show="active == 1" class="card2-item1">
        <div slot="header" class="clearfix">

          <span>基本信息</span>
          <span class="item1-line1" />
          <el-form ref="form" :model="form" label-width="80px" size="small" :inline="true">
            <el-form-item label="商品名称">
              <el-input v-model="form.product.name" />
            </el-form-item>
            <el-form-item label="商品编码">
              <el-input v-model="form.product.productSn" />
            </el-form-item>
            <!-- <el-form-item label="商品分类">

							<el-select v-model="form.product.productCategoryName" placeholder="分类" value-key="id">
								<el-option :label="item.name" v-for="item in items" :key="item.id" :value="item.name">
								</el-option>
							</el-select>
						</el-form-item> -->
            <el-form-item label="商品品牌">
              <el-select v-model="form.product.brandName" placeholder="品牌" value-key="id">
                <el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="商品描述">
              <el-input v-model="form.product.description" />
            </el-form-item>
            <div class="card2-item2">
              商品属性
              <span class="item1-line1" />
              <el-form-item label="商品原价">
                <el-input-number
                  v-model="form.product.originalPrice"
                  :min="1"
                  label="描述文字"
                  @change="handleChange"
                />
              </el-form-item>
              <el-form-item label="促销类型">
                <el-select v-model="form.product.promotionType" disabled placeholder="请选择">
                  <el-option label="没有促销使用原价" :value="0" />
                  <el-option label="使用促销价" :value="1" />
                  <el-option label="使用会员价" :value="2" />
                  <el-option label="使用阶梯价格" :value="3" />
                  <el-option label="使用满减价格" :value="4" />
                  <el-option label="限时购" :value="5" />
                </el-select>
              </el-form-item>
              <el-form-item label="活动价格">
                <el-input-number v-model="form.product.price" />
              </el-form-item>
              <el-form-item label="重量(kg)">
                <el-input-number v-model="form.product.weight" :min="1" :max="10" label="描述文字" />
              </el-form-item>
              <el-form-item label="审核状态">
                <el-tooltip>
                  <el-switch
                    v-model="form.product.verifyStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="是否上架">
                <el-tooltip>
                  <el-switch
                    v-model="form.product.publishStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="缩略图">

                <el-upload
                  action="/lejuAdmin/material/uploadFileOss"
                  list-type="picture-card"
                  :headers="headers"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="shangchuan"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <img width="100%" :src="form.product.pic" alt="">

              </el-form-item>
            </div>
            <div class="card2-item3">
              其他信息
              <span class="item1-line1" />
              <el-form-item label="推荐状态">
                <el-tooltip>
                  <el-switch
                    v-model="form.product.recommendStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="新品状态">
                <el-tooltip>
                  <el-switch
                    v-model="form.product.newStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="预告商品">
                <el-tooltip>
                  <el-switch
                    v-model="form.product.previewStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="搜索关键词">
                <el-input v-model="form.product.keywords" />
              </el-form-item>
              <el-form-item label="库存预警">
                <el-input-number v-model="form.product.lowStock" :min="1" :max="10" label="描述文字" />
              </el-form-item>
              <el-form-item label="商品排序">
                <el-input-number v-model="form.product.sort" :min="1" :max="10" label="描述文字" />
              </el-form-item>
              <el-form-item label="产品服务">
                <el-checkbox-group v-model="form.product.serviceIds">
                  <el-checkbox label="无忧退货" :true-label="1" />
                  <el-checkbox label="快速退款" :true-label="2" />
                  <el-checkbox label="免费包邮" :true-label="3" />

                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 第二页 -->
      <div v-show="active == 2" class="card2-item2">
        <el-form ref="form" :model="form" label-width="80px" size="small" :inline="true">
          商品sku信息
          <span class="item1-line1" />
          <el-form-item label="标题">
            <el-input v-model="form.product.detailTitle" />
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="form.product.subTitle" />
          </el-form-item>
          <el-form-item label="画册图片">
            <el-upload
              action="/lejuAdmin/material/uploadFileOss"
              list-type="picture-card"
              :headers="headers"
              :on-previews="handlePictureCardPreview"
              :on-removes="handleRemove"
              :on-success="upImg"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <img
              v-show="this.form.product.albumPics"
              style="width: 100px;height: 100px;"
              :src="form.product.albumPics"
              alt=""
            >

          </el-form-item>
        </el-form>
        <div>
          sku设置
          <div v-show=" colorObj.arr.length>0">
            <span>颜色:</span>
            <el-checkbox-group v-model="colorObj.selectArr">
              <el-checkbox v-for="item in colorObj.arr" :key="item" :label="item" />

            </el-checkbox-group>
          </div>
          <el-input
            v-model="colorObj.text"
            style="width: 200px; margin-right: 20px; display: inline-block;"
            placeholder="颜色描述,比如土豪金"
          />
          <el-button type="primary" size="mini" @click="createAttr('colorObj')">创建颜色</el-button>
        </div>
        <div v-show=" sizeObj.arr.length>0">
          <span>大小:</span>
          <el-checkbox-group v-model="sizeObj.selectArr">
            <el-checkbox v-for="item in sizeObj.arr" :key="item" :label="item" />

          </el-checkbox-group>
        </div>
        <el-input
          v-model="sizeObj.text"
          style="width: 200px; margin-right: 20px; display: inline-block;"
          placeholder="大小"
        />
        <el-button type="primary" size="mini" @click="createAttr('sizeObj')">创建大小选项</el-button>
      </div>
      <div>
        <el-button v-if="active==2" type="primary" size="mini" @click="createSku">创建sku</el-button>
      </div>
      <!-- pmsSkuStockList表单 -->
      <div v-if="form.pmsSkuStockList.length>0">
        <el-table :data="form.pmsSkuStockList" stripe style="width: 100%" border>
          <el-table-column label="序号" width="50" type="index" height="20px" />
          <el-table-column prop="pic" label="图片" width="200">
            <el-upload
              action="/lejuAdmin/material/uploadFileOss"
              list-type="picture-card"
              :headers="headers"
              :on-previews="handlePictureCardPreview"
              :on-removes="handleRemove"
              :on-success="SkuImg"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-table-column>
          <el-table-column prop="color" label="颜色" width="200" />
          <el-table-column prop="size" label="大小" width="200" />
          <el-table-column prop="stock" label="库存" width="50" />
          <el-table-column prop="lowStock" label="预警库存" width="50" />
          <el-table-column prop="skuCode" label="sku编码" width="100" />
          <el-table-column prop="price" label="价格" width="100" />
          <el-table-column prop="sale" label="销量" width="100" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="danger" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 第三页 -->
      <div v-show="active == 3" class="card2-item3">
        详情描述
        <span class="item1-line1" />
        <div>
          <span>商品详情</span>
          <!-- 富文本 -->
          <TiEditor ref="Ti" />
          备注:
          <el-input v-model="form.product.note" placeholder="请输入内容" />
        </div>

      </div>
      <div class="btn-warpper">
        <el-button v-if="active>1" style="margin-top: 12px;" type="primary" @click="active --">返回上一步</el-button>
        <el-button v-if="active==1&&active<3" style="margin-top: 12px;" type="primary" @click="active ++">
          下一步,填写库存信息</el-button>
        <el-button v-if="active==2" style="margin-top: 12px;" type="primary" @click="active ++">下一步,填写移动端详情
        </el-button>
        <el-button v-if="active==3" style="margin-top: 12px;" type="primary" @click="submit">提交保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入富文本组件
import TiEditor from '@/components/Tinymce'
// 引入uuid
import {
  v4
} from 'uuid'
import {
  getToken
} from '@/utils/myAuth.js'
import {
  findAllBrand
} from '@/api/marketing/index.js'
import {
  addProductAndSkus,
  getAllCategory,
  productSkusDetail
} from '@/api/commodity/list/index.js'
export default {
  components: {
    TiEditor

  },
  data() {
    const token = getToken()
    return {
      headers: {
        token: token
      }, // 上川文件的请求头
      active: 1,

      forms: {

      },
	  id: '',
      form: {
        product: {
          name: '',
          productSn: '',
          productCategoryName: '',
          brandName: '',
          description: '',
          originalPrice: 1,
          price: 1,
          promotionType: 5,
          weight: 1,
          verifyStatus: 0,
          publishStatus: 0,
          pic: '',
          recommendStatus: 1,
          newStatus: 1,
          previewStatus: 0,
          keywords: '',
          lowStock: 1,
          sort: 1,
          serviceIds: '',
          detailTitle: '',
          subTitle: '',
          albumPics: '',
          note: '',
          detailMobileHtml: ''
        },
        pmsSkuStockList: []

      },
      colorObj: { // 颜色
        text: '',
        arr: [], // 生成的数组
        selectArr: [] // 选中的数组
      },
      sizeObj: { // 大小
        text: '',
        arr: [], // 生成的数组
        selectArr: [] // 选中的数组
      },

      items: []
    }
  },
  created() {
    // 报错看不懂
    // 进来判断是编辑还是新增
    this.id = this.$route.params.val.id
    if (this.id) {
      productSkusDetail(this.id).then(res => {
		   console.log(res)
		   this.form.product = res.data.product
		   this.form.pmsSkuStockList = res.data.skus
	   })
    } else {
      // 获取品牌列表
      findAllBrand().then(res => {
        console.log(res)
        this.items = res.data.items
      }),
      getAllCategory().then(res => {
        console.log(res)
      })
    }
  },
  methods: {
    // 提交保存
    submit() {
      this.form.pmsSkuStockList.forEach(item => {
        // 删掉tempId
        delete item.tempId
      })
      // 提交前给form添加富文本的值
      this.form.product.detailMobileHtml = this.$refs.Ti.getContent()

      addProductAndSkus(this.form).then(res => {
        console.log(res)
        if (res.success) {
          this.$router.push({
            name: 'List'
          })
        }
      })
    },
    // sku表单删除
    del(row) {
      this.$confirm('此操作将永久删除该sku, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 过滤掉不等于当前删除的tempId的数据
        this.form.pmsSkuStockList = this.form.pmsSkuStockList.filter(item => item.tempId !== row
          .tempId)
      })
    },
    // sku上传照片
    SkuImg(val) {
      this.form.pmsSkuStockList.obj.pic = val.data.fileUrl
    },
    // 创建Sku
    createSku() {
      var arr = [
        this.colorObj.selectArr,
        this.sizeObj.selectArr
        // 后面还可以写更多任意的属性
      ]
      var skuList = arr.reduce((total, current) => {
        var newArr = []
        // 先循环外层(上一级抛出来的数组)的数组
        total.forEach(out => {
          // 再循环当前数组
          current.forEach(inner => {
            if (typeof out === 'object') {
              // 如果是数组的话.应该用...解构出来
              newArr.push([...out, inner])
            } else {
              newArr.push([out, inner])
            }
          })
        })
        return newArr
      })
      console.log(skuList)
      skuList.forEach(item => {
        var obj = {
          lowStock: 0,
          pic: '',
          price: 0,
          skuCode: '',
          stock: 0,
          sale: 1,
          color: item[0],
          size: item[1],
          tempId: v4()
        }
        // 用浅拷贝
        this.form.pmsSkuStockList.push(Object.assign({}, obj))
      })
    },
    // 创建颜色属性
    createAttr(attr) {
      console.log(this.[attr])
      this.[attr].arr.push(this.[attr].text)
      this.[attr].text = ''
    },
    // sku页面上传照片
    upImg(val) {
      console.log(val)
      this.form.albumPics = val.data.fileUrl
    },
    handleRemoves(file, fileList) {
      console.log(file)
    },
    handlePictureCardPreviews(file) {
      console.log(file)

      console.log(this.dialogImageUrl)
    },
    // 上传照片成功后
    shangchuan(val) {
      console.log(val)
      this.form.product.pic = val.data.fileUrl
    },
    // 上传照片
    handleRemove(file, fileList) {
      console.log(file)
      this.$options.data().form.product.pic
    },
    handlePictureCardPreview(file) {
      console.log(file)

      this.dialogVisible = true
      console.log(this.dialogImageUrl)
    },
    // 计数器
    handleChange(value) {
      console.log(value)
    }

  }
}
</script>

<style scoped="scoped" lang="scss">
	.card2 {
		margin: 20px;

		.item1-line1 {
			width: 100%;
			height: 1px;
			background-color: #007F7F;
			display: block;
			margin: 10px 0;
		}

		.card2-item2 {
			margin: 20px 0;
		}

		.btn-warpper {
			margin: 20px auto 0 auto;
			width: fit-content;
		}
	}
</style>
